<template>
  <div>
    <el-upload
      :action="url + '/file/uploadFileInterface'"
      list-type="picture-card"
      :headers="headers"
      :file-list="fileList"
      :on-success="handleSuccess"
      :on-change="handleChange"
      :before-upload="beforeAvatarUpload"
    >
      <i slot="default" class="el-icon-plus"></i>
      <div slot="file" slot-scope="{ file }">
        <img
          class="el-upload-list__item-thumbnail"
          :src="file.response ? file.url : url + file.filePath"
          alt=""
        />
        <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <i class="el-icon-zoom-in"></i>
          </span>
          <!-- <span class="el-upload-list__item-delete" @click="handleDownloadImg(file)">
                        <i class="el-icon-download"></i>
                    </span> -->
          <span
            class="el-upload-list__item-delete"
            @click="handleRemoveImg(file)"
          >
            <i class="el-icon-delete"></i>
          </span>
        </span>
      </div>
    </el-upload>
    <el-dialog
      :visible.sync="dialogVisibleImg"
      :append-to-body="true"
      width="50%"
      style="height: 100%"
    >
      <div style="height: 60%">
        <img style="max-width: 100%" :src="dialogImageUrl" alt="" />
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";
export default {
  data() {
    return {
      fileList: [],
      url: process.env.VUE_APP_BASE_API,
      headers: {
        token: getToken(), //从cookie里获取token，并赋值  Authorization ，而不是token
      },
      dialogVisibleImg: false,
      dialogImageUrl: "",
    };
  },
  props: {
    fileImgList: {
      type: Array,
    },
    name: {
      type: String,
    },
  },
  watch: {
    fileImgList: {
      handler(newVal, oldVal) {
        this.fileList = newVal;
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    handleSuccess(response, file, fileList) {
      if (response.code == 200) {
        this.fileList = fileList;
      } else {
        for (let i = 0; i < fileList.length; i++) {
          if (fileList[i].uid == file.uid) {
            fileList.splice(i, 1);
          }
        }
        this.$message({ message: response.msg, type: "error", duration: 1000 });
      }
      let data = this.backData();
      this.$emit("success", { name: this.name, data: data });
    },
    handleRemoveImg(file) {
      console.log(file, this.fileList);
      for (let i = 0; i < this.fileList.length; i++) {
        if (this.fileList[i].uid == file.uid) {
          this.fileList.splice(i, 1);
        }
      }
      let data = this.backData();
      this.$emit("success", { name: this.name, data: data });
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.response
        ? this.url + file.response.map.filePath
        : this.url + file.filePath;
      this.dialogVisibleImg = true;
    },
    handleDownloadImg(file) {
      this.fileDown2(file);
    },
    handleChange(file, fileList) {
      // this.fileList = fileList;
    },
    backData() {
      let data = [];
      for (let i = 0; i < this.fileList.length; i++) {
        if (this.fileList[i].response) {
          data.push({ filePath: this.fileList[i].response.map.filePath });
        } else {
          data.push({ filePath: this.fileList[i].filePath });
        }
      }
      return data;
    },
    beforeAvatarUpload(file) {
      console.log(file);
      let hz = file.name.split(".")[file.name.split(".").length - 1];
      // const isJPG = file.type === "image/jpg";

      //1MB=1024*1024(1MB=1024KB 1KB=1024MB)
      const is2M = file.size / 1024 / 1024 < 2;
      let isImgType = ["png", "jpg", "jpeg"];
      console.log(hz);
      //限制文件上传类型
      if (isImgType.indexOf(hz) == -1) {
        this.$message.error("文件上传格式有'png', 'jpg', 'jpeg'!");
        return false;
      }
      if (!is2M) {
        this.$message.error("上传文件大小不能超过 2MB!");
        return false;
      }

      return true;
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-upload-list__item.is-ready,
::v-deep .el-upload-list__item.is-uploading {
  display: none !important;
}
</style>
<style></style>
